<template>
  <div class="application-form-list">
    <div class="tit">费用申请项目</div>
    <div class="item" 
    v-for="(item,index) of listData"
     :key="index">
      <div class="item-top">
        <div class="item-name">
          <span>{{item.matter}}</span>
        </div>
        <!-- <div 
        :class="{'item-btn':true, 'item-btn-disactive':item.review_first!=0 && item.review_secondary!=0}"
        @click="feeApplySetting(item)"
        >拒绝</div> -->
      </div>
      <div class="item-mid">
        <span>{{item.status}}</span>
        <div>申请人:{{item.application_people}}</div>
      </div>
      <div class="item-bottom">
        <div :class="{'btn-disactive':item.review_first!=0}" @click="item.review_first==0 && applySettingFirst(item)">一级审核</div>
        <div :class="{'btn-disactive':item.review_secondary!=0}" @click="item.review_secondary==0 &&applySettingSecond(item)">二级审核</div>
        <div @click="toApplicationForm(item.id)">查看详情</div>
      </div>
    </div>
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      page:1,
      listData:'',//列表数据
      selectOptions:['通过','拒绝']
    }
  },
  methods: {
    toApplicationForm(id){
      wx.navigateTo({
        url:`/pages/meMain/financialManagementDetail/main?id=${id}`
      })
    },
    async feeVerifyList(){
      //获取列表
      let userToken=wx.getStorageSync('userToken')
      const res=await this.$api.feeVerifyList({
        limit:10,
        page:this.page,
        user_token:userToken
      })
      if(res.data.level=='success'){
        let data=res.data.data;
        let oldData=this.listData;
        if(data.length>0){
          this.listData=[...oldData,...data]
        }
      }else{
        this.$currency.showToast(res.data.messsage)
      }
    },
     applySettingFirst(item){
      //一级审核
      let that=this;
      let action='';
      let id=item.id;
      wx.showActionSheet({
        itemList:that.selectOptions,
        success(res){
          if(res.tapIndex===0){
            action='first_allow';
            that.applySettingHandle(action,id)
          }else if(res.tapIndex===1){
            action='first_deny';
            that.applySettingHandle(action,id)
          }else if(res.tapIndex===2){
            return
          }
        }
      })
      
    },
     applySettingSecond(item){
      //二级审核
      let that=this;
      let action='';
      let id=item.id;
      wx.showActionSheet({
        itemList:that.selectOptions,
        success(res){
          if(res.tapIndex===0){
            action='secondary_allow';
            that.applySettingHandle(action,id)
          }else if(res.tapIndex===1){
            action='secondary_deny';
            that.applySettingHandle(action,id)
          }else if(res.tapIndex===2){
            return
          }
        }
      })
      
    },
    async applySettingHandle(action,id){
      //审核回调
      let userToken=wx.getStorageSync('userToken')
      const res=await this.$api.feeApplySetting({
        action,
        id,
        user_token:userToken
      })

      this.$currency.showToast(res.data.message)
      if(res.data.level=='success'){
        this.page=1;
        this.listData=[];
        this.feeVerifyList()
      }else{
        this.$currency.showToast(res.data.messsage)
      }
    },
    initData(){
      this.page=1;
      this.listData=[];
    }

  },
  onLoad(){
    this.initData()
    this.feeVerifyList()
  },
  onReachBottom(){
    this.page++;
    this.feeVerifyList();
  }
}
</script>

<style lang="scss" scoped>
  .application-form-list{
    width:calc(100% - 20px);
    margin-left:10px;
  }
  .tit{
    font-weight: 600px;
    font-size: 20px;
    margin: 20px 0;
  }
  .item{
    border-radius: 10px;
    border:1px solid #eee;
    margin:10px 0;
    padding:0 10px;
    &>div{
      margin:10px 0;
    }
    .item-top{
      display: flex;
      justify-content: space-between;
      align-items: center;
      // span:last-child{
      //   margin-left:20px;
        
      // }
      .item-btn{
        color:#fff;
        background: red;
        padding:5px 15px;
        border-radius: 5px;
      }
      .item-btn-disactive{
        background: gray;
      }
    }
    .item-mid{
      span:first-child{
        // margin-left:20px;
        display:inline-block;
        color:red;
        margin-bottom: 10px;
      }
    }
    .item-bottom{
      display: flex;
      justify-content: space-between;
      align-items: center;
      &>div{
        background: rgb(22, 155, 213);
        padding:5px 10px;
        border-radius: 5px;
        color:#fff;
      }
      .btn-disactive{
        background: gray;
      }
    }
  }
</style>